const {src, dest, series, watch} = require('gulp');
const del = require('del');
const include = require('gulp-file-include');
const scss = require('gulp-sass');
const sync = require('browser-sync').create();


const clean = () => {
  return del('./dist');
};

const html = () => {
  return src(['./src/*.html', '!./src/_*.html'])
    .pipe(include({prefix: '&&'}))
    .pipe(dest('./dist'));
};

const style = () => {
  return src('./src/scss/main.scss')
    .pipe(scss({outputStyle: 'expanded'}))
    .pipe(dest('./dist/css'))
    .pipe(sync.stream());
};

const script = () => {
  return src('./src/js/main.js')
    .pipe(include({prefix: '//'}))
    .pipe(dest('./dist/js'));
};

const image = () => {
  return src('./src/images/**/*')
    .pipe(dest('./dist/images'));
};

const font = () => {
  return src('./src/fonts/**/*')
    .pipe(dest('./dist/fonts'));
};

const server = () => {
  sync.init({
    server: './dist'
  });

  watch('./src/*.html', html).on('change', sync.reload);
  watch('./src/scss/*.scss', style);
  watch('./src/js/**/*.js', script).on('change', sync.reload);
  watch('./src/images/**/*', image).on('change', sync.reload);
  watch('./src/fonts/**/*', font).on('change', sync.reload);
};

exports.default = series(clean, html, style, script, image, font, server);